<template>
    <div class="container">
        <!-- 头部 -->
        <div class="head">
            <span @click="backCartEvt">&lt;</span>
            <h4>订单结算</h4>
        </div>

        <!-- 地址栏 -->
        <div class="address">
            <p class="customer">WUWULING
                <span>18324103341</span>
            </p>
            <p class="addr">四川省成都市武侯区肖家河大厦千峰三楼
                <span>></span>
            </p>
            <p class="serve">收货不便时，选择下方服务网点，可享免费代收服务。</p>
            <p class="receive">
                发送商品及物流动态(含取件码)给收货人
                <van-checkbox style="color: #333; font-size: 14px; position: absolute; right: 40px"></van-checkbox>
            </p>
        </div>

        <!-- 商品栏 -->
        <!-- <div class="goods">
            <p>OMINI定制</p>
            <div class="details">
                <img src="" alt="">
                <div class="r">
                    <div class="title">
                        <p>法国BDM大圆圈耳环女网红欧美夸张时尚耳圈</p>
                        <span>￥539.99</span>
                    </div>
                    <div class="b">
                        浅金色【10cm】
                    </div>
                </div>
            </div>
            <ul>
                <li>
                    优惠券
                    <span>满500减20</span>
                    <span>&gt;</span>
                </li>
                <li>
                    配送方式
                    <span>普通配送</span>
                    <span>快递免邮&gt;</span>
                </li>
                <li>
                    运费险
                    <span>确认收货前退货可赔付9元</span>
                    <span>￥1.2
                        <van-checkbox style="color: #515151; font-size: 16px">全选</van-checkbox>
                    </span>
                </li>
                <li>
                    订单备注
                    <span>选填，请先和商家协商一致</span>
                </li>
                <li>共1件
                    <span>小计：
                        <span>￥519.99</span>
                    </span>
                </li>
            </ul>
        </div> -->
        <!--  -->
         <div class="address_">
             <!-- omini 定制 -->
             <span class="omini">OMINI定制</span>
             <div class="one" v-for="item in cart" :key="item.id">
                 <div class="img_"><img :src="item.image"></div>
                 <div>
                     <!-- France 法国 -->
                     <div class="france">
                         <div class="width">{{item.title}}</div>
                         <div class="right">
                              <div>￥{{item.price}}</div>
                              <div>{{item.amount}}</div>

                         </div>

                     </div>
                     <!-- 耳环 -->
                     <div class="grey">淡金色<span>【10cm】</span></div>

                 </div>
             </div>
             <!-- Discount 优惠 -->
             <div class="discount">
                <div>优惠券<span>满500减20</span></div>
                <div>配送方式<span>普通配送</span></div>
                <div>运费险<span>确认收货前对货即可赔付9元</span></div>
                <div>订单备注<span>选填，请先和商家协商一致</span></div>
                <div class="right">
                    <span>共1件</span>
                    <span>小计</span>
                    <span class="red">￥519.99</span>
                </div>
             </div>
        </div>

        <!-- 匿名购买 -->
        <div >
            <van-checkbox style="color: #333; font-size: 14px; ">匿名购买</van-checkbox>
        </div>

        <!-- job -->
        <div>
            <van-submit-bar :price="totalMoney * 100" button-text="提交订单"/>
        </div>

    </div>
</template>

<script>
import {mapGetters } from 'vuex'

export default ({
  methods: {
    backCartEvt () {
      // console.log(111)
      this.$router.push('/cart')
    }
  },

   computed: {
    cart () {
      return this.$store.state.cartModule.cart
    },
    ...mapGetters('cartModule', ['allChecked', 'totalMoney', 'totalAmount'])
  },
})
</script>

<style lang="less" scoped>
    * {
        margin: 0;
        padding: 0;
    }

    .container {
        padding: 10px;

        .head {
        display: flex;
        justify-content: center;
        position: relative;
        // padding-left: 40px;
        width: 100%;
        height: 50px;
        line-height: 50px;
        margin-bottom: 10px;

            span {
                position: absolute;
                left: 20px;
                color: rgb(146, 145, 145);
                font-size: 30px;
            }

            h4 {
                font-weight: 600;
            }
        }

        .address {
            min-width: 320px;
            padding: 10px;
            background-color: #fff;
            box-shadow: 3px 4px 5px  rgb(151, 150, 150);
            border-radius: 16px;
            box-sizing: border-box;
            margin-bottom: 20px;
           

            .customer {
                margin-left: 40px;
                font-size: 14px;
                color: #333;
                margin-bottom: 10px;

                span {
                    font-size: 12px;
                    color: #999;
                }
            }

            .addr {
                position: relative;
                margin-left: 40px;
                color: #333;
                font-size: 14px;
                margin-bottom: 10px;
                line-height: 20px;

                span {
                    position: absolute;
                    right: 20px;
                    margin-left: 10px;
                    font-size: 20px;
                    color: #ccc;
                }
            }

            .serve {
                width: 220px;
                margin-left: 40px;
                color: #d1082a;
                font-size: 12px;
                line-height: 20px;
                margin-bottom: 20px;
            }

            .receive {
                display: flex;
                width: 280px;
                font-size: 14px;
                color: #333;
                margin-left: 38px;
            }
        }

        .goods {
            width: 100%;
            height: 600px;
            min-width: 320px;
            padding: 10px;
            background-color: #fff;
            box-shadow: 3px 4px 5px  rgb(151, 150, 150);
            border-radius: 16px;
            box-sizing: border-box;

            p {
                font-size: 14px;
                color: #333;
                background-color: pink;
            }

            .details {
                width: 100%;
                background-color: blue;
            }

        }
    }
.omini{
    font-size: 14px;
}
// 优惠
        .address_{
            min-width: 320px;
            padding: 20px;
            background-color: #fff;
            box-shadow: 3px 4px 5px  rgb(151, 150, 150);
            border-radius: 16px;
            box-sizing: border-box;
            margin-bottom: 20px;
            // height: 380px;
            .img_{

                width: 100px;
                height: 100px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .one{
                margin-top: 16px;
                // background: pink;
                display: flex;
                .grey{
                    margin-top: 20px;
                    border-radius: 4px;
                    padding-left: 8px;
                    margin-left: 10px;
                    width: 200px;
                    line-height: 30px;
                    // text-align: center;
                    height: 30px;
                    background:#f2f2f2 ;
                    font-size: 14px;
                    color:#999999;
                }
            }
            .france{
                margin-left: 10px;
                display: flex;
                font-size: 14px;
                .width{
                    width: 150px;
                }
                // .right{
                //     float: right;
                // }
            }
        }
.discount{
    // text-align: center;
    div{
        font-size: 14px;
        line-height: 40px;
    }
    span{

        margin-left: 8px;
        color: #999999;
    }
    .right{
        float: right;
        .red{
            color:red;
        }
    }
}

</style>
